<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
	
	
			#myHead{
				width:100px;
				 height:100px;
				 margin: auto;
				  border: solid aquamarine 1px;
				   border-radius:50%;
				   overflow: hidden;
			}
			
			h3,h4{
				text-align: center;
			}
			h5{
				text-align: right;
			}
			#container {
			width: 100%;
			height: 200px;
			overflow: hidden;
	}
	.sections,.section {
		height:100%;
	}
	#container,.sections {
		position: relative;
	}
	.section {
		background-color: #000;
		background-size: cover;
		background-position: 50% 50%;
		text-align: center;
		color: white;
	}
	#section0 {
		background-image: url('img/guitar.jpg');
	}
	#section1 {
		background-image: url('img/piano.jpg');
	}
	#section2 {
		background-image: url('img/violin.jpg');
	}
	#section3 {
		background-image: url('img/flute.jpg');
	}
	#tLogin li{
				width:60px;
				 height:60px;
				 margin-left: 5%;
				
				   border-radius:50%;
				   overflow: hidden;
				   float: left;
				   
			}
	#tLogin li img{
		background-position: 10% 10%;
				width: 60px;
				height: 60px;
			}
	.ui-bar-f{
			 color: white;
    		background-color: #8968CD;
		}	
	.ui-body-f {
    
	    color: white;
	    background-color: rbga(0,0,0,.5);
}

	.ds-login{
		margin:60px;	
		}
	
		</style>
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


</head>
<body>
<!--主页-->
<div data-role="page" id="pageone" >
  <div data-role="header" data-position="fixed" data-theme="f">
    <h1>灵 乐</h1>
    <div data-role="navbar" >
      <ul>
        <li><a href="#pageone" class="ui-btn-active ui-btn-state" >主页</a></li>
        <li><a href="#pagetwo" >课程</a></li>
        <li><a href="#pagethree" >动弹</a></li>
         <li><a href="#pagefour" >问答</a></li>
        <li><a href="#pagefive" >我的</a></li>
      </ul>
    </div>
   
    
  </div>
 <div id="container">
		<div class="sections">
		<div class="section" id="section0"><h3>吉他入门</h3></div>
		<div class="section" id="section1"><h3>钢琴入门</h3></div>
		<div class="section" id="section2"><h3>小提琴入门</h3></div>
		<div class="section" id="section3"><h3>笛萧入门</h3></div>
		</div>
	</div>
  <div data-role="main" class="ui-content " >
    <h1>最新上线</h1>
    <hr />
    
    <div class="ui-grid-d ui-responsive">
       <div class="ui-block-a">
        <a href="courseDetail.html" class="ui-btn ui-corner-all ui-shadow"><img width="80%" height="100px" src="img/flute.jpg"/></a><br>
        <span>欢迎来到笛萧入门课程</span>
      </div>
      
      <div class="ui-block-c">
        <a href="#" class="ui-btn ui-corner-all ui-shadow"><img width="80%" height="100px" src="img/piano.jpg"/></a><br>
        <span>学钢琴，在灵乐</span>
      </div>
      
      <div class="ui-block-c">
        <a href="#" class="ui-btn ui-corner-all ui-shadow"><img  width="80%" height="100px" src="img/guitar.jpg"/></a><br>
        <span>学吉他，我在灵乐等你</span>
      </div>
      
       <div class="ui-block-c">
        <a href="#" class="ui-btn ui-corner-all ui-shadow"><img  width="80%" height="100px" src="img/violin.jpg"/></a><br>
        <span>小提琴入门课程，</span>
      </div>
    </div>
    <h1>好评课程</h1>
    <hr />
    
    <div class="ui-grid-d ui-responsive">
      <div class="ui-block-a">
        <a href="#" class="ui-btn ui-corner-all ui-shadow"><img width="80%" height="100px" src="img/flute.jpg"/></a><br>
        <span>欢迎来到笛萧入门课程</span>
      </div>
      
      <div class="ui-block-c">
        <a href="#" class="ui-btn ui-corner-all ui-shadow"><img width="80%" height="100px" src="img/piano.jpg"/></a><br>
        <span>学钢琴，在灵乐</span>
      </div>
      
      <div class="ui-block-c">
        <a href="#" class="ui-btn ui-corner-all ui-shadow"><img  width="80%" height="100px" src="img/guitar.jpg"/></a><br>
        <span>学吉他，我在灵乐等你</span>
      </div>
      
       <div class="ui-block-c">
        <a href="#" class="ui-btn ui-corner-all ui-shadow"><img  width="80%" height="100px" src="img/violin.jpg"/></a><br>
        <span>小提琴入门课程，</span>
      </div>
    </div>
    </div>
    
    


  <div data-role="footer" data-position="fixed" data-theme="f">
     <h1>灵乐在线乐器学习平台</h1>
  </div> 
</div> 



<!--课程-->
<div data-role="page" id="pagetwo">
  <div data-role="header" data-theme="f">
    <h1>灵 乐</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#pageone"  >主页</a></li>
        <li><a href="#pagetwo" class="ui-btn-active ui-btn-state">课程</a></li>
        <li><a href="#pagethree" >动弹</a></li>
         <li><a href="#pagefour" >问答</a></li>
        <li><a href="#pagefive" >我的</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
  	
   	<h2>吉他</h2>
    <ul data-role="listview" data-inset="true">
      <li>
        <a href="courseDetail.html">
        <img src="img/guitar.jpg">
        <h2>吉他入门</h2>
        <p>吉他入门课程，快速上手</p>
        </a>
      </li>
      <li>
        <a href="#">
        <img src="img/piano.jpg">
        <h2>钢琴入门</h2>
        <p>钢琴入门课程，尽享钢琴带给你的乐趣</p>
        </a>
      </li>
    </ul>
    	<a href="course.html" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">更多...</a>
    
  </div>

 <div data-role="footer" data-position="fixed" data-theme="f">
     <h1>灵乐乐器学习平台</h1>
  </div> 
</div> 



<!--动弹-->
<div data-role="page" id="pagethree">
  <div data-role="header" data-theme="f">
    <h1>灵 乐</h1>
    <div data-role="navbar">
     <ul>
        <li><a href="#pageone"  >主页</a></li>
        <li><a href="#pagetwo" >课程</a></li>
        <li><a href="#pagethree" class="ui-btn-active ui-btn-state">动弹</a></li>
         <li><a href="#pagefour" >问答</a></li>
        <li><a href="#pagefive" >我的</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
  	
  	  <a href="#" class="ui-btn ui-btn-inline ui-corner-all" data-position="fixed">我要动弹</a>
    	
    <ul data-role="listview" data-inset="true">
      <li>
        <a href="mood.html">
        <img src="img/snow.jpeg" width="50" height="50" style="margin:15px;border-radius: 50%;">
        <h2>千城飘雪更新了动态</h2>
        <p>大家好</p>
        </a>
        <h5><a href="#">评论</a>(0)</h5>
      </li>
      <li>
        <a href="#">
        <img src="img/piano.jpg" width="50" height="50" style="margin:15px;border-radius: 50%;">
        <h2>天道酬琴更新了动态</h2>
        <p>下班了。。。</p>
        </a>
         <h5><a href="#">评论</a>(0)</h5>
      </li>
   
      <li>
        <a href="mood.html">
        <img src="img/snow.jpeg" width="50" height="50" style="margin:15px;border-radius: 50%;">
        <h2>千城飘雪更新了动态</h2>
        <p>大家好</p>
        </a>
         <h5><a href="#">评论</a>(0)</h5>
      </li>
      <li>
        <a href="#">
        <img src="img/piano.jpg" width="50" height="50" style="margin:15px;border-radius: 50%;">
        <h2>天道酬琴更新了动态</h2>
        <p>下班了。。。</p>
        </a>
         <h5><a href="#">评论</a>(0)</h5>
      </li>
    
      <li>
        <a href="mood.html">
        <img src="img/snow.jpeg" width="50" height="50" style="margin:15px;border-radius: 50%;">
        <h2>千城飘雪更新了动态</h2>
        <p>大家好</p>
        </a>
         <h5><a href="#">评论</a>(0)</h5>
      </li>
      <li>
        <a href="#">
        <img src="img/piano.jpg" width="50" height="50" style="margin:15px;border-radius: 50%;">
        <h2>天道酬琴更新了动态</h2>
        <p>下班了。。。</p>
        </a>
         <h5><a href="#">评论</a>(0)</h5>
      </li>
    </ul>
  
  </div>

<div data-role="footer" data-position="fixed" data-theme="f">
     <h1>灵乐乐器学习平台</h1>
  </div> 
</div> 



<!--问答-->
<div data-role="page" id="pagefour" >
   <div data-role="header" data-theme="f">
    <h1>灵 乐</h1>
    <div data-role="navbar">
     <ul>
        <li><a href="#pageone"  >主页</a></li>
        <li><a href="#pagetwo" >课程</a></li>
        <li><a href="#pagethree" >动弹</a></li>
         <li><a href="#pagefour" class="ui-btn-active ui-btn-state">问答</a></li>
        <li><a href="#pagefive" >我的</a></li>
      </ul>
    </div>
  </div>

   <div data-role="main" class="ui-content">
  	<a href="#pagesix" class="ui-btn ui-btn-inline ui-corner-all ">我要提问</a>
  	<a href="question.html" class="ui-btn ui-btn-inline ui-corner-all ">问答中心</a>
  	
    <h2>最新问题</h2>
    
    <ul data-role="listview" data-inset="true" style="background: rgba(0,0,0,.5);">
      <li >
        <a href="#">
        <img src="img/Desert.jpg" width="50" height="50" style="margin:15px;border-radius: 50%;">
        <h2>筱筱</h2>
        <p>吉他简谱</p>
        <span class="ui-li-count">25</span>
        </a>
      </li>
      <li >
        <a href="questionDe">
        <img src="img/snow.jpeg" width="50" height="50" style="margin:15px;border-radius: 50%;">
        <h2>千城飘雪</h2>
        <p>竹笛</p>
         <span class="ui-li-count">125</span>
         
        </a>
      </li>
    </ul>
    
     <h2>尚未解决</h2>
    
    <ul data-role="listview" data-inset="true">
      <li>
        <a href="#">
        <img src="img/Desert.jpg" width="50" height="50" style="margin:15px;border-radius: 50%;">
        <h2>筱筱</h2>
        <p>吉他简谱</p>
        <span class="ui-li-count">25</span>
        </a>
      </li>
      <li>
        <a href="questionDe">
        <img src="img/snow.jpeg" width="50" height="50" style="margin:15px;border-radius: 50%;">
        <h2>千城飘雪</h2>
        <p>竹笛</p>
         <span class="ui-li-count">125</span>
         
        </a>
      </li>
    </ul>
    
     <h2>讨论最多</h2>
    
    <ul data-role="listview" data-inset="true">
      <li>
        <a href="#">
        <img src="img/Desert.jpg" width="50" height="50" style="margin:15px;border-radius: 50%;">
        <h2>筱筱</h2>
        <p>吉他简谱</p>
        <span class="ui-li-count">25</span>
        </a>
      </li>
      <li>
        <a href="questionDe">
        <img src="img/snow.jpeg" width="50" height="50" style="margin:15px;border-radius: 50%;">
        <h2>千城飘雪</h2>
        <p>竹笛</p>
         <span class="ui-li-count">125</span>
         
        </a>
      </li>
    </ul>
  </div>

 <div data-role="footer" data-position="fixed" data-theme="f">
     <h1>灵乐乐器学习平台</h1>
  </div> 
</div> 
<!--我要提问-->
<div data-role="page" data-dialog="true" id="pagesix">
 
  	
 

  <div data-role="main" class="ui-content">
      	
  	 <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">返回</a>
  	 <hr />
   <form method="post" action="java.asp">
      <div class="ui-field-contain">

        <label for="tt">标题：</label>
        <input type="text" name="tt" id="tt" placeholder="用一句简要的话描述你的问题...">
        
        <label for="info">正文：</label>
         <textarea name="addinfo" id="info" placeholder="补充..."></textarea>
          <fieldset data-role="fieldcontain">
        <label for="day">选择类型</label>
        <select name="day" id="day">
         <option value="mon">笛</option>
         <option value="tue">萧</option>
         <option value="wed">钢琴</option>
         <option value="thu">小提琴</option>
         <option value="fri">吉他</option>
         <option value="sat">笙</option>
         <option value="sun">琵琶</option>
        </select>
      </fieldset>
      </div>
      <input type="submit" data-inline="true" value="发布">
    </form> 
  </div>
</div>



<!--我的-->
<div data-role="page" id="pagefive">
  <div data-role="header" class="navView" data-theme="f">
    <h1>灵 乐</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#pageone"  >主页</a></li>
        <li><a href="#pagetwo" >课程</a></li>
        <li><a href="#pagethree" >动弹</a></li>
         <li><a href="#pagefour" >问答</a></li>
        <li><a href="#pagefive" class="ui-btn-active ui-btn-state">我的</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content mView" >
  		<form method="post" action="">
      <div class="ui-field-contain">
        <label for="fullname">用户名：</label>
        <input type="text" name="fullname" id="fullname">       
        <label for="ps">密码：</label>
        <input type="password" name="ps" id="ps">
       <h5>	<a href="register.html">注册</a> | <a href="#">忘记密码</a></h5>
      </div>
      <input type="submit" data-inline="true" value="提交">
    </form>
    <h4>第三方登录</h4>
  	<hr />
  	<div class="ds-login">
  	
  	</div>
  </div>

  <div data-role="footer" data-position="fixed" data-theme="f">
     <h1>灵乐乐器学习平台</h1>
  </div> 
</div> 
<!--图片轮播-->

<script src="dist/pageSwitch.min.js"></script>
<script>
	$("#container").PageSwitch({
		direction:'horizontal',
		easing:'ease-in',
		duration:1000,
		autoPlay:true,
		loop:'false'
	});
</script>
<script src="js/embed.js"></script>
<script type="text/javascript">
    var duoshuoQuery = {short_name:"not"};
    
  </script>
</body>
</html>
